<template>
  <div>
    <el-row gutter="20">
      <!-- 内容类型 -->
      <el-col :span="3">
        <el-tree
          :props="defaultProps"
          :data="treeData"
          @node-click="loadChildren"
          ref="catTree"
        />
      </el-col>
      <!-- 内容列表 -->
      <el-col :span="21">
        <!-- 搜索表单 -->
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="searchContent">
              <el-form-item label="文本">
                <el-input v-model="searchContent.text1" placeholder="文本" />
              </el-form-item>
              <el-form-item label="url">
                <el-input v-model="searchContent.url" placeholder="url" />
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="searchContent.status"
                  placeholder="全部"
                  clearable
                >
                  <el-option label="全部" value="0" />
                  <el-option label="正常" value="1" />
                  <el-option label="禁用" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="doQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!-- 功能按钮 -->
        <el-row>
          <el-col :span="24">
            <el-button
              style="margin: 5px 5px"
              type="primary"
              @click="editSelection"
              ><el-icon><EditPen /></el-icon>编辑</el-button
            >
            <el-button style="margin: 5px 5px" type="danger"
              ><el-icon><Delete /></el-icon>删除</el-button
            >
            <el-button
              @click="showSaveContentDialog"
              style="margin: 5px 5px"
              type="success"
              ><el-icon><Plus /></el-icon>新增</el-button
            >
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <el-row>
          <el-col :span="24">
            <el-table
              :data="contents"
              max-height="500"
              style="width: 100%"
              :stripe="true"
              :border="true"
              :fit="true"
              ref="contentTable"
            >
              <!-- 这里写列 -->
              <!-- type定义为selection,这一列会显示为复选框，自动实现全选功能 -->
              <el-table-column type="selection" />
              <!-- prop绑定要显示的属性的名字，label绑定列名 -->
              <el-table-column prop="contentId" label="编号" />
              <el-table-column prop="category.catName" label="类型" />
              <el-table-column prop="text1" label="文本1" />
              <el-table-column prop="text2" label="文本2" />
              <el-table-column prop="text3" label="文本3" />
              <el-table-column prop="img1" label="图片1">
                <template #default="scope">
                  <el-image
                    v-if="scope.row.img1"
                    style="height: 50px"
                    :src="scope.row.img1"
                    :zoom-rate="1.2"
                    fit="cover"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="img2" label="图片2">
                <template #default="scope">
                  <el-image
                    v-if="scope.row.img2"
                    style="height: 50px"
                    :src="scope.row.img2"
                    :zoom-rate="1.2"
                    fit="cover"
                  />
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip="createTime"
                prop="createTime"
                label="创建时间"
              />
              <el-table-column
                prop="modifyTime"
                show-overflow-tooltip="modifyTime"
                label="最后修改时间"
              />
              <!-- 这里使用formatter绑定一个函数，用来格式化结果 -->
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag
                    v-if="scope.row.status == 1"
                    class="ml-2"
                    type="success"
                    >正常</el-tag
                  >
                  <el-tag v-else class="ml-2" type="danger">Tag 5</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <!-- 这里写的内容会放在默认的插槽中 -->
                <template #default="scope">
                  <el-button size="small" @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 分页栏 -->
        <el-row>
          <el-col :span="24">
            <el-pagination
              background
              :page-size="limit"
              :total="total"
              layout="prev, pager, next, jumper, ->, total"
              @currentChange="handlerCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加内容的窗体 -->
    <el-dialog v-model="dialogSaveContentVisible" title="添加内容">
      <el-form :model="newContent">
        <el-form-item label="类别" :label-width="formLabelWidth">
          <el-input v-model="currNode.catName" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="url" :label-width="formLabelWidth">
          <el-input v-model="newContent.url" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文本1" :label-width="formLabelWidth">
          <el-input v-model="newContent.text1" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文本2" :label-width="formLabelWidth">
          <el-input v-model="newContent.text2" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文本3" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            v-model="newContent.text3"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="图片1" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :show-file-list="true"
            :disabled="false"
            action="http://localhost:11011/cms/upload"
            name="uploadFile"
            :on-success="uploadSuccess1"
            :multiple="false"
          >
            <img height="300" width="300" v-if="imageUrl1" :src="imageUrl1" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片2" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :show-file-list="true"
            :disabled="false"
            action="http://localhost:11011/cms/upload"
            name="uploadFile"
            :on-success="uploadSuccess2"
            :multiple="false"
          >
            <img height="300" width="300" v-if="imageUrl2" :src="imageUrl2" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button
            @click="
              dialogSaveContentVisible = false;
              this.newContent = {};
            "
            >取消</el-button
          >
          <el-button type="primary" @click="doSaveContent"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import contentCatHttp from "../../api/content-cat.js";
import contentHttp from "../../api/content.js";

export default {
  data() {
    return {
      treeData: [], // 树的数据
      currNode: undefined, // 当前的选中的树的节点信息
      newContent: {}, // 保存新添加的内容的信息
      isLeaf: false, // 表示当前选中的tree的节点是否是叶子节点
      defaultProps: {
        children: "children",
        label: "catName",
      },
      searchContent: {}, // 绑定搜索数据的对象
      dialogSaveContentVisible: false, // 添加内容的弹窗标记
      contents: [], // 内容列表数据
      currentPage: 1, //  当前页码
      limit: 10, // 每页大小
      total: 0, // 总条数
      imageUrl1:"",//第一张图片的地址
      imageUrl2:""//第二张图片的地址
    };
  },
  methods: {
    /**
     * 图片2上传成功的回调函数
     */
    uploadSuccess2(res){
        console.log(res);
        this.imageUrl2 = res.msg;
        // 将图片地址设置到newContent中
        this.newContent.img2 = this.imageUrl2;
    },
    /**
     * 图片1上传成功的回调函数
     */
    uploadSuccess1(res){
        console.log(res);
        this.imageUrl1 = res.msg;
        // 将图片地址设置到newContent中
        this.newContent.img1 = this.imageUrl1;
    },

    /**
     * 功能按钮-新增的事件
     */
    showSaveContentDialog() {
      if (this.currNode != undefined && this.isLeaf) {
        this.dialogSaveContentVisible = true;
      } else {
        this.$message({
          type: "warning",
          message: "请选择一个叶子类别",
        });
      }
    },
    /**
     * 添加内容的提交按钮事件
     */
    doSaveContent() {
        // 表单中的数据都是自动绑定到newContent中的。
        // catId是需要手动绑定的。
        this.newContent.catId = this.currNode.catId;
        // 提交数据
        contentHttp.save(this.newContent,res=>{
            if(res.code == '200'){
                this.$message({
                    type:"success",
                    message:"保存成功"
                });
                this.dialogSaveContentVisible = false;
                this.newContent = {};
                this.imageUrl1 = undefined;
                this.imageUrl2 = undefined;
                // 刷新数据
                this.loadContents();

            }else{
                this.$message({
                    type:"error",
                    message:"保存失败"
                });
            }
        });

    },
    /**
     * 加载content列表
     */
    loadContents() {
      contentHttp.list(this.searchContent, this.page, this.limit, (res) => {
        console.log(res);
        //设置数据
        this.contents = res.data.records;
        this.total = res.data.total;
      });
    },
    /**
     * 翻页事件
     */
    handlerCurrentChange(value) {
      this.currentPage = value;
    },
    /**
     * 行删除事件
     */
    handleDelete(row) {},
    /**
     * 行编辑事件
     */
    handleEdit(row) {},
    /**
     * 搜索按钮事件
     */
    doQuery() {
      // 判断是否要添加类别编号
      if (this.isLeaf) {
        this.searchContent.catId = this.currNode.catId;
      }
      // 直接查询
      this.loadContents();
    },
    /**
     * 节点的单击事件
     */
    loadChildren(node) {
      // 清空searchContent中的catId
      this.searchContent.catId = undefined;
      // 纪录当前的节点信息
      this.currNode = node;
      // 判断是否有子节点
      contentCatHttp.hasChildren(node.catId, (res) => {
        if (res.msg > "0") {
          this.isLeaf = false;
          //  说明有子节点
          // 加载子节点
          this.loadTreeData(node.catId, node);
        } else {
          this.isLeaf = true; // 标记当前选中的节点是否是叶子节点
          // 先将当前的node 的id赋值给content的catId
          this.searchContent.catId = this.currNode.catId;
          // 加载内容列表
          this.loadContents();
        }
      });
    },
    /**
     * 加载树的数据
     */
    loadTreeData(parentId, node) {
      contentCatHttp.getByParentId(parentId, (res) => {
        console.log(res.data);
        // 将我们查询的数据传入pushTreeData
        this.pushTreeData(res.data.records, node);
      });
    },
    /**
     * 将对应的数据放入treeData对应的位置
     */
    pushTreeData(data, node) {
      if (this.treeData.length == 0) {
        // 一级类目
        this.treeData = data;
      } else {
        // 非一级类目
        node.children = data;
      }
    },
  },
  mounted() {
    this.loadTreeData(0);

    this.loadContents();
  },
};
</script>

<style scope>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>